<template>
	<view>
		<view class="all">
			<view class="content">
				<view class="content-title">消息管理</view>
				<u-icon @click='toBack' class='closeIcon' name="close-circle-fill"></u-icon>
				<scroll-view scroll-y="true">
					<u-table>
						<u-tr class="u-tr u-tr-title">
							<u-th :width="index===0?'55rpx':''" v-for="(item,index) in tableTitlelist" :key='index' class="u-th">{{item}}</u-th>
						</u-tr>

						<u-tr :style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'" :class="index===0?'table-content':''"
							v-for="(item,index) in tableDataList">
							<u-td width="55rpx">{{item.dateTimes.substring(0,4)}}</u-td>
							<u-td>{{item.dateTimes}}</u-td>
							<u-td>{{item.messageType.name}}</u-td>
							<u-td>{{item.content}}</u-td>
						</u-tr>
					</u-table>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableTitlelist: ['年度', '计划日期', '类别', '提醒内容'],
				tableDataList: [],
			}
		},
		
		onShow(){
			this.selectByMonth()
		},
		onLoad() {
			this.selectByMonth()
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			/* 查询重要提醒 */
			async selectByMonth() {
				const res = await this.$u.api.selectByMonth()
				if (!res.success) {
					this.$u.toast(res.msg)
					return;
				}
				// res.body.data.forEach(item => {
				// 	this.tableDataList.push(item)
				// })
				this.tableDataList = res.body.data
				console.log(this.tableDataList);
			}
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}

	.all {
		display: flex;
		justify-content: center;
		padding-top: 60rpx;
	}

	.content-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.content {
		position: relative;
		background-color: #FFFFFF;
		width: 70%;
		height: 70vh;
		font-size: 20rpx;
		padding: 20rpx 50rpx;
	}

	.closeIcon {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		color: #555555;
		font-size: 30rpx;
	}

	/* 表格 */
	
	.table-content{
		margin-top: 40rpx;
	}
	.u-table {
		height: 50vh !important;
	}

	.u-tr-title {
		position: fixed;
		width: 425rpx;
		margin-top: -1rpx;
	}
	
	.u-tr{
		width: 425rpx;
	}

	.u-th,
	.u-td {
		font-size: 17rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: left !important;
		white-space: nowrap;
		overflow: auto;
	}

	.u-th {
		background-color: #6096E6 !important;
		color: #FFFFFF !important;
	}

	.u-td {
		color: #034AB2 !important;
	}
</style>
